<template>
  <div class="boxContent">
    <div class="appBox">
      <div class="searchList">
        <el-form :model="state.params"
                 ref="FormInstance "
                 class="boxFrom">
          <div class="searchBox">
            <template v-for="(item, index) in state.totalInputColumns"
                      :key="index">

              <el-form-item v-if="item.type == 'input'">
                <el-input v-model="state.params[item.key]"
                          clearable
                          :placeholder="item.label"></el-input>
              </el-form-item>
              <el-form-item v-if="item.type == 'select'">
                <el-select v-model="state.params[item.key]"
                           :placeholder="item.label"
                           clearable
                           v-if="item.key == 'ruleStatus'">
                  <el-option label="未发布"
                             value="0" />
                  <el-option label="已发布"
                             value="1" />
                </el-select>

              </el-form-item>
              <el-form-item v-if="item.type == 'time'">
                <el-date-picker v-model="state.params[item.key]"
                                type="date"
                                value-format="YYYY-MM-DD"
                                placeholder="请选择时间" />
              </el-form-item>
            </template>
          </div>
        </el-form>
      </div>
      <div class="tabaleBox">
        <el-table border
                  :data="state.tableData"
                  style="width: 100%"
                  :header-cell-style="{ color: '#000' }">
          <el-table-column prop=""
                           label="排序"
                           width="120"
                           align="center">
            <template #default="scope">
              {{ scope.$index + 1 }}
            </template>
          </el-table-column>
          <!-- v-permission="1120" -->
          <el-table-column prop="title"
                           label="标题"
                           align="center"
                           width="200">
            <template #default="scope">
              <el-input v-model="scope.row.title"
                        clearable
                        :disabled="!$parse.btnAuthority(1120)"
                        @blur="methods.inputBlur(scope.row)"
                        maxlength="6"
                        placeholder="请输入标题"></el-input>
            </template>
          </el-table-column>
          <el-table-column prop="subtitle"
                           label="副标题"
                           align="left">
            <template #default="scope">
              <el-input v-model="scope.row.subtitle"
                        clearable
                        :disabled="!$parse.btnAuthority(1120)"
                        maxlength="20"
                        @blur="methods.inputBlur(scope.row)"
                        placeholder="请输入副标题"></el-input>
            </template>
          </el-table-column>
          <el-table-column prop="picAddr"
                           label="顶部图"
                           align="center"
                           width="205">
            <template #default="scope">
              <div class="">
                <uploadImg :showNum="1"
                           class="bacImg"
                           v-if="$parse.btnAuthority(1120)"
                           :uploadImgList="scope.row.picAddr"
                           @changeUploadImgList="methods.changeUploadImgList($event,scope.$index,scope.row)" />
                <el-image v-else
                          :src="scope.row.picAddr[0].url"
                          :preview-teleported="true"
                          :preview-src-list="[scope.row.picAddr[0].url]">
                </el-image>

              </div>
            </template>
          </el-table-column>
          <el-table-column prop="updatedAt"
                           label="修改时间"
                           show-overflow-tooltip
                           align="center"
                           width="180">
          </el-table-column>
        </el-table>
      </div>
      <!-- <div class="pagination">
        <el-pagination background
                       v-model:current-page="state.params.pageNum"
                       v-model:page-size="state.params.pageSize"
                       :page-sizes="[10, 20, 30, 50]"
                       layout="total, sizes, prev, pager, next, jumper"
                       :total="state.totalSize"
                       @size-change="methods.handleSizeChange"
                       @current-change="methods.handleCurrentChange" />
      </div> -->

    </div>
  </div>
</template>

<script setup>
import {
  ref,
  onMounted,
  reactive,
  toRefs,
  defineComponent,
  getCurrentInstance,
  nextTick,
} from "vue";
import Editor from '@/components/Editor.vue'
import { useRouter } from "vue-router";
import { ElMessage, ElMessageBox } from "element-plus";
const router = useRouter();
const app = getCurrentInstance()?.proxy;
const initState = () => {
  return {

    totalSize: 0,
    tableData: [],
    params: {
      pageNum: 1,
      pageSize: 10,
    },
    totalInputColumns: [
    ],
  };
};
const state = reactive(initState());
onMounted(() => {
  methods.getDataList();
});
const methods = {
  handleAction (type, data) {
    switch (type) {
      case "edit":
        app.$router.push('/operate/wxapp/homeMenu/add?id=' + data.id)
        break;
      case "add": //新增
        app.$router.push('/operate/wxapp/homeMenu/add')
        break;
      case "subAdd": //保存
        methods.subData()
        break;
      case "delete": // 删除
        ElMessageBox.confirm("请确认是否删除该帮助文章?", "删除帮助文章", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            app.$post("/recommendrule/deleteRule", { id: data.id }).then((res) => {
              if (res.code == 200) {

                methods.getDataList();
                ElMessage({
                  type: "success",
                  message: "已删除",
                });
              }
            });
          })
        break;

      case "query": //查询
        methods.getDataList();
        break;
      case "reset": // 重置
        state.params = initState().params;
        break;
    }
  },
  inputBlur (data) {
    let paramsdata = JSON.parse(JSON.stringify(data))
    paramsdata.picAddr = data.picAddr[0]?.url
    app.$post('appletLoginConfigController/updateById', paramsdata).then(res => {
      if (res.code == 200) {
        methods.getDataList()
        return ElMessage.success('已修改')
      }
    })
  },
  getDataList () {
    app.$get("/appletLoginConfigController/getList", state.params)
      .then((res) => {
        console.log(res);
        if (res.code == 200) {
          res.data.forEach(rs => {

            if (rs.picAddr) {
              rs.picAddr = [{ url: rs.picAddr, fileType: "image" }]
            } else {
              rs.picAddr = []
            }
          })
          state.tableData = res.data;
          // state.totalSize = res.data.total;
        }
      });
  },
  changeUploadImgList (img, index, data) {
    state.tableData[index].picAddr = img
    setTimeout(() => {
      methods.inputBlur(data)
    }, 1000)
  },
  //分页变化
  handleSizeChange () {
    state.params.pageNum = 1;
    methods.getDataList();
  },
  //表格翻页
  handleCurrentChange () {
    methods.getDataList();
  },
};
</script>

<style lang="scss" scoped>
.bacImg {
  .imgs {
    width: 180px !important;
  }
  ::v-deep(.el-image) {
    width: 180px !important;
  }
  ::v-deep(.el-upload) {
    width: 180px !important;
  }
}
.appBox {
  background: #fff;
  border-radius: 5px;
  padding: 20px;
  height: calc(100% - 20px);
  width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;

  .tabaleBox {
    overflow: hidden;
    flex: 1;
  }
  .btnsDatil {
    color: #0079fe;
    cursor: pointer;
  }
  .pagination {
    margin-top: 20px;
    height: 50px;
    display: flex;
    justify-content: flex-end;
  }
  ::v-deep(.el-dialog__body) {
    padding: 20px 30px !important;
  }
  .imgs {
    flex-wrap: wrap;
    .forbox {
      height: 150px;
      margin: 10px 0 0 10px;
    }
    .imgBox {
      height: 100%;
      width: auto;
    }
    .videoBox {
      width: auto;
      height: 100%;
    }
  }
}
</style>
